<template>
    <div class="business">
        <div class="justify-center d-flex text-center mt-10">
            <div>
                <img src="@/static/img/icon/business.png" style="width: 39px"/>
                <!--        <h2 class="mt-2">商务合作</h2>-->
                <div v-html="bussTex" class="ql-editor"></div>
            </div>
        </div>
        <!--    <div-->
        <!--      class="business-texts d-flex justify-center align-center flex-column mt-6"-->
        <!--    >-->
        <!--      <p>商务合作请加入群聊：724426197，联系群主</p>-->
        <!--      <p>或直接添加商务合作QQ：4678069，添加请备注说明来意</p>-->
        <!--    </div>-->
    </div>
</template>

<script lang="ts">
    import {defineComponent, onMounted, reactive, toRefs} from "vue";
    import {PromoteService} from "@/services/PromoteService";
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'

    export default defineComponent({
        name: "business",
        setup() {
            const state = reactive({
                bussTex: ''
            });
            const getContentList = async () => {
                let result = await PromoteService.getContent({
                    key: 'business'
                });
                if (result.data.code == 0) {
                    if (result.data.data.length > 0) {
                        state.bussTex = result.data.data[0].value
                    }
                }
            };
            onMounted(() => {
                getContentList()
            });
            return {
                ...toRefs(state),
            };
        },
    });
</script>

<style scoped lang="scss">
    .business {
        height: 100%;

        .business-texts {
            font-size: 16px;
            color: #fff;
            font-weight: 600;
            text-align: center;
            padding: 0 10px;
        }
    }
</style>
